var echarts = require("echarts");
let chartLeft1 = {
  title: {},
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      label: {
        backgroundColor: "#6a7985"
      }
    }
  },

  color: ["#ffab6f", "#09b916"], //图例颜色
  legend: {
    top: "0%",
    icon: "roundRect",
    data: ["本年", "本月"],
    textStyle: {
      color: "rgba(255,255,255,.5)",
      fontSize: "12"
    }
  },
  toolbox: {
    feature: {}
  },
  grid: {
    left: "10",
    top: "10",
    right: "10",
    bottom: "10",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12
        }
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)"
        }
      },
      data: [
        "下订",
        "排产",
        "下线",
        "发车"
      ],
      nameTextStyle: {
        borderwith :  '2000px',
        color: '#fac858'
      },
      axisLabel:{
        width :20
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisTick: { show: false },
      minInterval: 10,
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      },
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12
        }
      },

      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      }
    }
  ],
  series: [
    {
      name: "本年",
      type: "bar",
      smooth: true,
      barWidth: '20%',
      data: []
      /* data: [502, 220, 150, 540] */
    },
    {
      name: "本月",
      type: "bar",
      smooth: true,
      barWidth: '20%',
      data: []
      /* data: [100, 1500, 100, 2500] */
    }
  ]
};
// 
let chartLeft3 = {
  title: {},
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      label: {
        backgroundColor: "#6a7985"
      }
    }
  },
  color: ["#ffab6f", "#09b916"], //图例颜色
  legend: {
    top: "0%",
    icon: "roundRect",
    data: ["往年", "本年"],
    textStyle: {
      color: "rgba(255,255,255,.5)",
      fontSize: "12"
    }
  },
  toolbox: {
    feature: {}
  },
  grid: {
    left: "10",
    top: "10",
    right: "10",
    bottom: "10",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12
        }
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)"
        }
      },
      data: [],
      nameTextStyle: {
        borderwith :  '2000px',
        color: '#fac858'
      },
      axisLabel:{
        width :20
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisTick: { show: false },
      minInterval: 10,
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      },
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12
        }
      },

      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      }
    }
  ],
  series: [
    {
      name: "往年",
      type: "line",
      smooth: true,
      barWidth: '20%',
      data: []
      /* data: [502, 220, 150, 540] */
    },
    {
      name: "本年",
      type: "line",
      smooth: true,
      barWidth: '20%',
      data: []
      /* data: [100, 1500, 100, 2500] */
    }
  ]
};

let chartLeft2 = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '国内经销' },
        { value: 735, name: '国际经销' },
        { value: 580, name: '新能源' },
        { value: 484, name: '佳景' },
        { value: 300, name: '专用车' }
      ]
    }
  ]
};


// 由于这套饼图中除了“大饼”外的饼图构造非常相似（只有“大饼”高亮时显示中间的标签）
// 可以用一个数组存储其中不相同的配置，然后遍历配置数组自动生成所有serie
const pieSeriesSettings = [
	{
		name: '内部小饼', // 饼图名称
		radius: ['46%', '53%'], // 饼图内径/外径尺寸
		opacity: 0.56, // 普通状态下的透明度
		empyOpacity: 0.6, // 高亮状态下的透明度
		scaleSize: 14, // 高亮状态下图形放大的尺寸
		isBorder: false // 是否是外圈（外圈只有一条数据，否则与“大饼”数据相同）
	},
	{
		name: '外圈', radius: ['80%', '82%'], opacity: 0.6, empyOpacity: 0.6, scaleSize: 10, isBorder: true
	},
	{
		name: '大饼阴影1', radius: ['50%', '65%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	},
	{
		name: '大饼阴影2', radius: ['51%', '66%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	},
	{
		name: '大饼阴影3', radius: ['52%', '67%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	},
	{
		name: '大饼阴影4', radius: ['53%', '68%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	},
	{
		name: '大饼阴影5', radius: ['54%', '69%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	},
	{
		name: '大饼阴影6', radius: ['55%', '70%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	}
];

let testData = [
  {value: 1048, name: 'Search Engine'},
  {value: 735, name: 'Direct'},
  {value: 580, name: 'Email'},
  {value: 484, name: 'Union Ads'},
  {value: 300, name: 'Video Ads'}
];

let serieList = [];
serieList.push({
	name: '大饼',
	z: 10, // 放在最上层
	type: 'pie',
	radius: ['56%', '63%'], // 通过设置内径与外径将饼图变为圆环饼图
	itemStyle: {
		borderRadius: 40 // 设置圆环的圆角弧度
	},
	emphasis: { // 设置高亮时显示标签
		label: {
			show: true
		},
		scale: true, // 设置高亮时放大图形
		scaleSize: 18
	},
	label: { // 设置图形标签样式
		show: false, // 未高亮时不显示标签，否则高亮时显示的标签会与静态的标签重叠
		position: 'center',
		// 设置标签展示内容,其中{d}、{b}为echarts标签内容格式器
		formatter: '{d_style|{d}}{per_style|%}\n{b_style|{b}}',
		// 为标签内容指定样式，只能设置series-pie.label支持的样式
		rich: {
			d_style: {
				fontSize: 80
			},
			per_style: {
				fontSize: 60
			},
			b_style: {
				fontSize: 42
			}
		}
	},
	data: testData
});

for (let pieSetting of pieSeriesSettings) {
	serieList.push({
		name: pieSetting.name,
		z: 1, // 放在最下层
		type: 'pie',
		radius: pieSetting.radius, // 通过设置内径与外径将饼图变为圆环饼图
		itemStyle: {
			color: pieSetting.isBorder ? '#fff' : null,
			borderRadius: 40, // 设置圆环的圆角弧度
			opacity: pieSetting.opacity // 设置普通状态下圆环的透明度
		},
		emphasis: { // 设置高亮时不显示标签
			disabled: pieSetting.isBorder, // 外圈需关闭高亮效果
			itemStyle: {
				opacity: pieSetting.empyOpacity // 设置高亮状态下圆环的透明度
			},
			label: {
				show: false
			},
			scale: !pieSetting.isBorder, // 外圈需关闭高亮放大效果
			scaleSize: pieSetting.scaleSize
		},
		label: { // 设置图形标签样式
			show: false // 未高亮时不显示标签，否则高亮时显示的标签会与静态的标签重叠
		},
		data: pieSetting.isBorder ? [{value: 1, name: 'border'}] : testData
	});
}

let chartRight1 = {
  title: {},
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985"
      }
    }
  },

  color: ["#ffab6f", "#09b916", "#83cddc"], //图例颜色
  legend: {
    top: "0%",
    icon: "roundRect",
    data: ["销售订单", "退货订单", "折扣订单"],
    textStyle: {
      color: "rgba(255,255,255,.5)",
      fontSize: "12"
    }
  },
  toolbox: {
    feature: {}
  },
  grid: {
    left: "10",
    top: "20",
    right: "10",
    bottom: "10",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12
        }
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)"
        }
      },
      data: [
        "2020.06.15",
        "2020.06.16",
        "2020.06.17",
        "2020.06.18",
        "2020.06.19",
        "2020.06.20",
        "2020.06.21",
        "2020.06.22"
      ]
    }
  ],
  yAxis: [
    {
      type: "value",
      axisTick: { show: false },
      minInterval: 60,
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      },
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12
        }
      },

      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      }
    }
  ],
  series: [
    {
      name: "销售订单",
      type: "line",
      smooth: true,
      lineStyle: {
        color: "#45d4ba",
        width: 1
      }, //线条的样式
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#83cddc"
          },
          {
            offset: 1,
            color: "#bfdffbb5"
          }
        ])
      },
      data: [5, 22, 150, 54, 1, 230, 4, 1]
    },
    {
      name: "退货订单",
      type: "line",

      smooth: true,
      lineStyle: {
        color: "#04a710",
        width: 1
      }, //
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#0cbf22"
          },
          {
            offset: 1,
            color: "#b8f7d1b5"
          }
        ])
      },
      data: [10, 150, 1, 250, 20, 100, 10, 150]
    },
    {
      name: "折扣订单",
      type: "line",

      lineStyle: {
        color: "#0864c3",
        width: 1
      }, //线条的样式
      smooth: true,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#29d7ff"
          },
          {
            offset: 1,
            color: "#34ccef85"
          }
        ])
      },
      data: [100, 2, 260, 1, 200, 30, 101, 40]
    }
  ]
};
let chartRight2 = {
  title: {},
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      label: {
        backgroundColor: "#6a7985"
      }
    }
  },

  color: ["#ffab6f", "#09b916"], //图例颜色
  legend: {
    top: "0%",
    icon: "roundRect",
    textStyle: {
      color: "rgba(255,255,255,.5)",
      fontSize: "12"
    }
  },
  toolbox: {
    feature: {}
  },
  grid: {
    left: "10",
    top: "10",
    right: "10",
    bottom: "10",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12
        }
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)"
        }
      },
      data: [
      ],
      nameTextStyle: {
        borderwith :  '2000px',
        color: '#fac858'
      },
      axisLabel:{
        width :20
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisTick: { show: false },
      minInterval: 10,
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      },
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12
        }
      },

      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      }
    }
  ],
  series: [
    {
      type: "bar",
      smooth: true,
      barWidth: '20%',
      data: []
    }
  ]
};

var pieChart1 = {
  tooltip: {
      trigger: 'item'
  },
  legend: {
      top: 'bottom',
      icon: "circle",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
      itemWidth: 10,  // 设置宽度
      itemHeight: 10, // 设置高度
      itemGap: 7,// 设置间距
      padding: [0, 0, 15, 0] //图例距离
  },
  series: [
    {
      name: '框架',
      type: 'pie',
      radius: ['40%', '65%'],
      avoidLabelOverlap: false,
      itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
      },
      label: {
          show: false,
          position: 'center'
      },
      emphasis: {
          label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
          }
      },
      labelLine: {
          show: false
      },
      data: [
          { value: 1048, name: '.NetCore1' },
          { value: 735, name: 'Dapper' },
          { value: 735, name: 'EntityFramework' },
          { value: 735, name: 'Redis' },
          { value: 735, name: 'Vue3.0' },
          { value: 580, name: 'Vuex' },
          { value: 484, name: 'Element plus' }
      ]
    }
  ]
}
export { chartLeft1, chartLeft2,chartLeft3, chartRight1, chartRight2, serieList, pieChart1 }
